import React, { useEffect, useState, useRef } from 'react'
import './index.scss'
import Card from './card'
import Header from './header'
import { useHistory } from 'react-router-dom'
import AddDynamic from './add-dynamic'
import axios from '../../utils/axios'
import {loading} from '../../components/loading'
import {message} from '../../components/message'

export default function Dynamic() {
  let history = useHistory()
  const [label, setLabel] = useState(0)
  const [data, setData] = useState([])
  const contentRef = useRef()
  useEffect(() => {
    getList()
  }, [label])
  const toDetail = (id) => {
    history.push(`/dynamic-detail?id=${id}`)
  }
  const getList = () => {
   let load =  loading()
    axios.get(`/dynamic/getDynamicList?label=${label}`).then((res) => {
      console.log(res.data.data)
      setData(res.data.data)
      load.close()
    }).catch(err=>{
      message('加载失败啦~')
       load.close()
    })
  }
  const query = () => {
    getList()
  }
  return (
    <div className="dynamic" ref={contentRef}>
      <Header
        getI={(e) => {
          setLabel(e)
        document.documentElement.scrollTop = 0
        // 浏览器兼容
        document.body.scrollTop = 0
        window.pageYOffset = 0
   
        }}
      ></Header>
      <div className="content">
        <Card todetail={toDetail} data={data} query={query}></Card>
        <AddDynamic></AddDynamic>
      </div>
    </div>
  )
}
